import TinyReact from './TinyReact'
const root = document.getElementById("root")
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2>(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
  </div>
)
const virtualDOM2 = (
  <div className="container">
    <h1>你好 Tiny React222</h1>
    <h2>(编码必杀技)222</h2>
    <div text="12312321">
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好222")}>点击我22</button>
  </div>
)
// TinyReact.render(virtualDOM, root)
// console.log(virtualDOM)
class Dome extends TinyReact.Component {
  constructor (props) {
    super(props)
  }
  render (){
    return <div> 12312</div>
  } 
}
function Heart (props) {
  console.log(props,'xxx')
  return (
    <div>
      &hearts;
      {props.title}
      <Dome a="xxxx"></Dome>
    </div>
  )
}
class Alert extends TinyReact.Component {
  constructor (props) {
    super(props)
    this.state = {
      title: "default title"
    }
    this.clickHandle = this.clickHandle.bind(this)
  }
  clickHandle () {
    console.log(this.but, this.heart, '222')
    this.setState({
      title: 'change title'
    })
  }
  // componentDidMount () {
  //   console.log('componentDidMount')
  // }
  // componentWillReceiveProps (nextProps) {
  //   console.log('componentWillReceiveProps', nextProps)
  // }
  // componentWillUpdate (nextProps) {
  //   console.log('componentWillUpdate', nextProps)
  // }
  // componentDidUpdate (nextProps) {
  //   console.log('componentDidUpdate', nextProps)
  // }
  render () {
    console.log(this.state)
    return <div>
      hello class Component {this.state.title}
      {this.props.name}
      <button ref={but => (this.but = but)} onClick={this.clickHandle}>改变title</button>
      <Dome ref={ heart => (this.heart = heart)}></Dome>
    </div>
  }
}
TinyReact.render(<Alert name="张三"/>, root)
// TinyReact.render(virtualDOM, root)


// setTimeout(() => {
//   TinyReact.render(<Alert name="李四"/>, root)
//   // TinyReact.render(virtualDOM2, root)
// },2000)

